<template>
  <el-container>
    <el-header>
      <div>
        <h3><i class='iconfont icon-yuanqufuwu tagsh'></i><span class="tagsh">{{ user.tenantName || '园区' }}</span></h3>
        <!-- <span>环策环保管理系统V1.0</span> -->
      </div>
      <div style='display: flex;align-items: center'>
        <el-dropdown @visible-change="notificationViewChange" style='width:100px'>
          <el-badge :value="unreadCount" class="item">
            <i class="el-icon-message-solid"></i>
          </el-badge>
          <el-dropdown-menu slot="dropdown">
            <Notification
              ref="notificationShow" :active-name.sync="activeName"
              @unreadCount="(count)=>{this.unreadCount=count}"></Notification>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown @command="handleCommand">
          <div class='el-dropdown-link' style="display: flex;align-items: center;">
            <i class='el-icon-user-solid'></i>
            <span>{{ user.name || ''}}</span>
            <i class='el-icon-arrow-down el-icon--right'></i>
          </div>
          <el-dropdown-menu slot='dropdown' >
            <el-dropdown-item icon='el-icon-plus' command="modifyPerson">个人设置</el-dropdown-item>
            <el-dropdown-item icon='el-icon-circle-plus' command="modifyPsd">修改密码</el-dropdown-item>
            <el-dropdown-item icon='el-icon-circle-plus' command="logout">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class='main-cnt'>
      <el-aside class='boxLeft'>
        <el-menu router :default-active='activeRouterPath' @select="selectNavMenu">
          <template v-for='(item, index) in menuList'>
            <el-submenu v-if='item.children.length > 0' :index="index + ''" :key='item.path + index'>
              <template slot='title'>
                <i :class='item.icon'></i>
                <span slot='title'>{{ item.name }}</span>
              </template>

              <template v-for='(sub_item, sub_index) in item.children'>
                <el-menu-item v-if='sub_item.children.length == 0' :index='sub_item.path' :key="sub_index+'s2'">
                  <span slot='title' style='margin-eft:l 12px'>{{ sub_item.name }}</span>
                </el-menu-item>

                <el-submenu v-else :index="sub_item.name+'8'+index" :key="sub_index+'s3'">
                  <template slot='title'>
                    <i :class='sub_item.icon'></i>
                    <span slot='title'>{{ sub_item.name }}</span>
                  </template>

                  <!-- 层级开始 -->
                  <template v-for='(sub_c_item, sub_c_index) in sub_item.children'>
                    <el-menu-item v-if='sub_c_item.children.length == 0' :index='sub_c_item.path' :key="sub_c_index+'s4'">
                      <span slot='title' style='margin-eft:l 12px'>{{ sub_c_item.name }}</span>
                    </el-menu-item>

                    <el-submenu v-else :index="sub_c_item.id+'9'+sub_c_index" :key="sub_c_item.id+'s3'">
                      <template slot='title'>
                        <i :class='sub_c_item.icon'></i>
                        <span slot='title'>{{ sub_c_item.name }}</span>
                      </template>
                      <el-menu-item
                        class='menu-item'
                        v-for='(sub_c_item_c, sub_c_index_c) in sub_c_item.children'
                        :index='sub_c_item_c.path'
                        :key="sub_c_index_c + 'sub_c_c'">
                        <span slot='title' style='margin-left: 12px'>{{ sub_c_item_c.name }}</span>
                      </el-menu-item>
                    </el-submenu>
                  </template>
                  <!-- 层级结束 -->

                  <!-- <el-menu-item
                    class='menu-item'
                    v-for='(sub_item_c, sub_index_c) in sub_item.children'
                    :index='sub_item_c.path'
                    :key="sub_index_c + 'sub_c'">
                    <span slot='title' style='margin-left: 12px'>{{ sub_item_c.name+'456' }}</span>
                  </el-menu-item> -->
                </el-submenu>
              </template>
            </el-submenu>

            <el-menu-item
              class='menu-item'
              v-else-if='!item.requireAuth'
              :index='item.url'
              :key='index'
            >
              <i :class='item.icon'></i>
              <span slot='title'>{{ item.name }}</span>
            </el-menu-item>

            <el-menu-item
              class='menu-item'
              v-else
              :index='item.path'
              :key='index'
            >
              <i :class='item.icon'></i>
              <span slot='title'>{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
        <div class='dibu'></div>
      </el-aside>

      <el-container class='boxRight'>
        <div style='height: 60px'></div>
        <el-main>
          <div class='homeWelcome' v-if="this.$router.currentRoute.path == '/home'">
            <!-- <h2>欢迎登陆环策环保管理系统</h2> -->
            <Index></Index>
          </div>
          <router-view class='homeRouterView' />
        </el-main>
        <el-footer>
          ©2021 四川环策安全环保技术服务有限公司 版权所有
          <br/>
          <span class="safeUrl" @click="safeUrl()">蜀ICP备2021019368号</span>
        </el-footer>
      </el-container>
    </el-container>

    <mofifyPerson v-if="modifyPersonState" @home-sys-edit-user-close-finish ='modifyPersonState = false'></mofifyPerson>
    <mofifyPsd v-if="modifyPsdSate" @home-sys-update-user-psd-finish='modifyPsdSate = false'></mofifyPsd>

  </el-container>
</template>

<script>
import Notification from '@/components/common/Notification';
import SubscribeHandler from '@/utils/SubscribeHandler';
import Api from "@/support/Api";

import Index from "./home/index";
import mofifyPerson from "./home/modifyPerson";
import mofifyPsd from "./home/modifyPsd";

export default {
  components: { Notification, Index, mofifyPerson, mofifyPsd },
  name: 'Home',
  data() {
    return {
      activeName: "unread",
      unreadCount: 0,
      menuList: this.$store.state.menuList,
      user: this.$store.state.user || window.localStorage.getItem('user'),

      modifyPersonState: false,
      modifyPsdSate: false,

      activeRouterPath: window.localStorage.getItem('activeRouterPath') || '/home'

    };
  },
  mounted() {
    let self = this;
    this.apiInvoker = Api.newInstance(this, 1,'cloudFile');
    this.$ge.$on('notificationReadDelay',data=>{
      self.apiInvoker.invoker('remindDelay',{id:data.relationId,delayDays:1},true).execute(d=>{
      },'post')
    });
  },
  created() {
    let self = this;
    this.subscribeHandler = SubscribeHandler.newInstance(this).getConnected().connect().subscribe('NotificationExchange', this.user.id).isOk(subList => {
      for (let exchange in subList) {
        for (let rk of subList[exchange]) {
          self.$ge.$on(this.subscribeHandler.msgEvtPrefix + rk, data => {
            self.$refs.notificationShow.addDynamicNotification(JSON.parse(data));
          });
        }
      }
    });
  },
  // computed: {
  //   menuList() {
  //     return this.$store.state.menuList;
  //   },
  //   user() {
  //     return this.$store.state.user;
  //   },
  // },
  methods: {
    selectNavMenu(index, path) {
      if(path && path.length > 0)
        window.localStorage.setItem('activeRouterPath', path[path.length - 1])
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCommand(command) {
      if(command == 'logout') {
        this.logout();
      }else if (command == 'modifyPerson') {
        this.modifyPersonState = true;
      } else {
        this.modifyPsdSate = true;
      }
    },
    logout() {
      let that = this;
      this.$post('/logout')
        .then(reponse => {
          that.$store.commit('exit_logout');
          //页面跳转
          that.$router.push('/');
        }).catch(err =>{
          this.$message.error('获取用户信息异常！');
        })
    },
    safeUrl() {
      window.open("https://beian.miit.gov.cn/","_blank");  
    },
    notificationViewChange(show) {
      if (!show) {
        this.$refs.notificationShow.refresh();
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.tagsh{
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
    color: #409EFF;
}
.boxLeft {
  width: 200px;
  text-align: left;
  //padding-top: .1px;
  position: fixed;
  background: white;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41,0.05);
  z-index: 100;
  //top:60px;
  padding-top: 60px;
  padding-bottom: 40px;
  bottom: 0;
  //margin-top: 60px;
  transition: padding-top .3s;
  flex: 0 0 200px;
  max-width: 200px;
  min-width: 200px;
  left: 0;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  .dibu{
    height: 40px;
    width: 200px;
    position: fixed;
    bottom: 0;
    z-index: 120;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0px -1px 0 #f0f0f0;
    background: white;
  }
  i {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
  }
}
.main-cnt {
  height: calc(100% - 60px);
  padding: 0 0 0 200px;
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 100vh;
  background: #f0f2f5;
}

.boxRight {
  position: relative;
  .safeUrl:hover{
    color: #409EFF;
    cursor: pointer;
  }
}

.el-header {
  position: fixed;
  background: white;
  box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
  width: 100%;
  left: 0;
  top: 0;
  z-index:200;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-footer {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
}

</style>
